<template>
<view class="container">
		<form action="" @submit="formSubmit">
			<view class="edit-password">
				<view class="item">
					<view class="left">电话号码</view>
					<view class="right">
						<input type="text" maxlength="11" name="mobile" :value="mobile" class="input" placeholder="请输入电话号码">
					</view>
				</view>				
			</view>

			<view class="button-container">
				<button class="button" form-type="submit">确定</button>
			</view>



		</form>

	</view>
</template>

<script>
	const FormValidation = require('../../utils/formValidation');
	import {resetPassword,resetMobile} from '@/utils/api.js';
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				mobile: ''
			}
		},
		onLoad() {
			//初始化验证
			this.initValidate();
		},
		methods: {
			/**
			 * 验证初始化
			 */
			initValidate() {
				// 验证字段的规则
				const rules = {
					mobile: {
						required: true,
							tel: true
					}					
				};

				// 验证字段的提示信息，若不传则调用默认的信息
				const messages = {
					mobile: {
						required: '请输入手机号码',
						tel: '请输入正确的手机号码'
					}
				};

				// 创建实例对象
				this.FrmValidate = new FormValidation(rules, messages)
			},
			//表单提交
			formSubmit(e) {
				const data = e.detail.value;
				// 传入表单数据，调用验证方法
				if (!this.FrmValidate.checkForm(data)) {
					const error = this.FrmValidate.errorList[0];
					uni.showToast({
						title: error.msg,
						icon: 'none'
					})
					return false
				}
				
				this.mobile=data.mobile;
				
				this.resetMobileFn();
			},
			//重置电话
			resetMobileFn(){
				let self=this;
				util.safeRquest().then(function(userId){
					let info={
						UserID:userId,
						Mobile:self.mobile
					};
					console.log(info);
					resetMobile(info).then(function(res){
						console.log(res);
						let rdata=res.data;
						if(rdata.status==0){
							uni.showToast({
								title:'保存成功',
								duration:1500
							});
                            
							setTimeout(function(){
								uni.navigateBack();
							},1500);                            
						}else{
							uni.showToast({
								title:rdata.message,
								icon:'none',
								duration:1500
							})
						}
					}).catch(function(err){
						uni.showToast({
							title:err.message,
							icon:'none'
						})
					})
				})
				
			}

		}
	}
</script>

<style>
	.edit-password {
		padding: 30upx;
	}

	.item {
		display: flex;
		align-items: center;
		margin-bottom: 30upx;
	}

	.item .left {
		flex: 3;
		font-size: 28upx;
		color: #666;
	}

	.item .right {
		flex: 7;
	}

	.item .right .input {
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		padding: 12upx 10upx;
		font-size: 28upx;
		color: #666;
		border: 1px solid #f1f1f1;
		border-radius: 10upx;
	}

	.button-container {
		box-sizing: border-box;
		width: 100%;
		padding: 10upx 30upx 30upx 30upx;
	}

	.button-container .button {
		box-sizing: border-box;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		font-size: 32upx;
		color: #fff;
		background-color: #3c67c2;
		text-align: center;
		border-radius: 10upx;
	}
</style>
